<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<!--需要的对象：
  blogs - PageInfo
  user - obj
-->

<head lang="en">
  <meta charset="UTF-8">
  <title>文章列表</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/footer.css">
  <link rel="stylesheet" href="/css/sidbar.css">
  <link rel="stylesheet" href="/css/blog.css">
  <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="./list.html">Lorem 的博客</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">首页</a></li>
        <li><a href="#">最近</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="搜索...">
      </form>
    </div>
  </div>
</nav>

<div class="container">

  <div class="page-header">
    <h1>Lorem 的博客
      <small>Mi nunc congue nunc, ante felis vestibulum bibendum.</small>
    </h1>
  </div>

  <div class="row">

    <div class="col-sm-8">
      <div class="blog-post" th:each="blog: ${blogs.list}">
        <h3 class="blog-post-title"><a th:text="${blog.title}" th:href="@{'/blog/' + ${blog.id}}">"${blog.title}"</a></h3>
        <p class="blog-post-meta">2015年2月3日 标签：<a href="#">Web开发</a></p>
        <p class="blog-post-content" th:text="${blog.content}">"${blog.content}"</p>
      </div>

      <hr>

      <div class="blog-post" th:remove="all">
        <h3 class="blog-post-title"><a href="./item.html">Vel volutpat dictum sagittis lacus</a></h3>
        <p class="blog-post-meta">2015年2月3日 标签：<a href="#">Linux</a></p>
        <p class="blog-post-content">Morbi pede vestibulum, nisl orci suspendisse. Amet erat gravida fringilla aliquam
          metus, dui vitae cras metus varius etiam tempus, in et. Dui venenatis dolor, amet magna facilisis, fames ut
          imperdiet eros ut ligula justo, et non viverra a viverra mollis, arcu gravida. Fermentum eu erat, eros enim
          nulla vivamus praesent hymenaeos dui. Sollic.</p>
      </div>

      <hr>

      <div class="blog-post" th:remove="all">
        <h3 class="blog-post-title"><a href="./item.html">Donec mauris nullam praesent eget</a></h3>
        <p class="blog-post-meta">2015年2月3日 标签：<a href="#">Web开发</a></p>
        <p class="blog-post-content">Laoreet magna sit gravida eu neque, erat porttitor aenean iaculis leo ac, aliquam
          commodo malesuada ullamcorper, iaculis interdum quam, dui tortor id. Convallis felis nunc condimentum.</p>
      </div>

      <hr>

      <nav>
        <ul class="pager">
          <li th:if="${blogs.hasPreviousPage}" class="previous"><a th:href="@{'/blogger/'+ ${user.name} + '?page=' + ${blogs.prePage}}"><span aria-hidden="true">&larr;</span> 上一页</a></li>
          <li th:if="${blogs.hasNextPage}" class="next"><a th:href="@{'/blogger/'+ ${user.name} + '?page=' + ${blogs.nextPage}}">下一页 <span aria-hidden="true">&rarr;</span></a></li>
<!--          <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>-->
<!--          <li th:unless=${blogs.last} class="next"><a th:href="@{'/blogs?page=' + ${blogs.number + 1}}">下一页 <span aria-hidden="true">&rarr;</span></a></li>-->
        </ul>
      </nav>

    </div>

    <div class="col-sm-3 col-sm-offset-1">
      <div class="sidebar-module sidebar-module-inset">
        <div class="avatar">
          <img class="img-circle img-rounded img-thumbnail avatar" src="/img/catty.jpeg">
          <div>
            <h4>Lorem</h4>
            <a>lorem@example.com</a>
          </div>
        </div>
        <p>Ornare sapien rhoncus, nec mi hendrerit. Ante aliquam dui arcu, diam sodales erat felis dolor sed in, nec
          placerat non.</p>
      </div>
      <div class="sidebar-module">
        <h4>归档</h4>
        <ol class="list-unstyled">
          <li><a href="#">2015年03月</a></li>
          <li><a href="#">2015年02月</a></li>
          <li><a href="#">2015年01月</a></li>
          <li><a href="#">2014年12月</a></li>
          <li><a href="#">2014年11月</a></li>
          <li><a href="#">2014年10月</a></li>
          <li><a href="#">2014年09月</a></li>
          <li><a href="#">2014年08月</a></li>
          <li><a href="#">2014年07月</a></li>
        </ol>
      </div>
    </div>

  </div>

</div>

<footer>
  &copy; 2020 半圆学社, Inc. &middot; <a href="#">隐私</a> &middot; <a href="#">条款</a>
</footer>

</body>
</html>
